<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件&异步组件</title>

    <script src="./../vue/vue.js"></script>

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 
        动态组件 
            动态组件上使用 keep-alive
        
        异步组件
            Vue.component("component-name",function(resolve,reject){
                setTimeout(function(){
                    resolve({
                        template: "<div></div>"
                    })
                },5000)
            })


     -->
    <div id="app">
        <component-father :tabs="tabNames">
            <!-- "{ tab }" 是结构解析属性，设置的地方需要用 v-bind: 这个属性名  -->
            <template #content="{ tab }">
                <keep-alive>
                    <component :is="componentsKeyValue[tab]"></component>
                </keep-alive>
            </template>
        </component-father>


                
    </div>
    <!-- </slot> -->
    <script>

        Vue.component("component-father",{
            props: {
                tabs: Array
            },
            data: function(){
                return {
                    index: 0
                }
            },
            template: `
            <div style="height: 400px;width: 200px;border: 1px solid blue;">
                <div style="position:relative; height: 40px; border: 1px solid red;">
                    <button v-for="(tab,index) in tabs" :key="index" style="float: left; height: 40px; margin-right: 5px;" @click="onClickTheTag(index)">{{ tab }}</button>
                </div>
                <div style="position: relative; height: 360px;width: 200px; border: 1px solid pink;">
                    <slot name="content" v-bind:tab="tabs[this.index]"></slot>
                </div>
            </div>
            `,
            methods: {
                onClickTheTag(index){
                    this.index = index
                    console.log(index)
                }
            },
        })

        Vue.component("component-post",{
            props: [],
            data: function(){
                return {
                    postContent:[
                        {id: 1, title: "title1",content:"content1"},
                        {id: 2, title: "title2",content:"content2"},
                        {id: 3, title: "title3",content:"content3"},
                    ],
                    currentContent: ""
                }
            },
            template: `
            <div style="border: 1px solid yellowgreen;width: 100%;height: 100%;">
                <div style="float: left; width: 60px;height: 360px; border: 1px solid blue;">
                    <ul>
                        <li v-for="item in postContent" :key="item.id"><a href="#" @click="clickItem(item)">{{item.title}}</a></li>
                    </ul>
                </div>
                <div style="float: left; width: 130px; height: 360px;border: 1px solid pink;">{{ currentContent }}</div>
            </div>
            `,
            methods:{
                clickItem(item){
                    this.currentContent = item.content
                }
            }
        })

        Vue.component("component-archive",{
            template: `<div>222</div>`
        })

        Vue.component("component-syn",function(resolve,reject){
            setTimeout(() => {
                resolve({
                    template: "<div>这是一个异步组件</div>"
                })
            }, 5000);
        })




        let vm = new Vue({
            el: "#app",
            data: {
                tabNames: ["Posts","Archive","synCompnent"],
                componentsKeyValue: {
                    "Posts": "component-post",
                    "Archive": "component-archive",
                    "synCompnent": "component-syn"
                }, 
                
            }
        })
    </script>

</body>
</html>